<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html, body {
            padding: 0;
            margin: 0;
            height: 100%;
        }

        .box {
            background: #dddddd;
            height: 100%;
            width: 100%;
            /* 如果是inline元素想要设置成网格布局，可以使用inline-grid，内部就可以使用网格布局，只不过对于外部的其他元素来说，该元素依然保持着inline元素的特点 */
            display: grid;
            grid-template-rows: 50%; /* 一行 第一行的行高是 50% */
            grid-template-columns: 50%; /* 一列 第一列的列宽是 50% */
            /* 一行一列，共产生一个单元格，并设置单元格宽高都为容器50% */
        }

        .child-box {
            background: #2b81af;
            width: 100%;  /* 子元素设置的宽高是相对于单元格的宽高来计算的 */
            height: 100%;
        }
    </style>
</head>
<body>
<div class="box">
    <div class="child-box">
        这是一段文字
    </div>
</div>
</body>
</html>
